import React, { useState } from "react";
import "./Banner.css";

import { useNavigate } from "react-router-dom";

export default function () {
  const [query, setQuery] = useState("");
  let navigate = useNavigate();
  return (
    <div className="Banner">
      <span className="Banner-title">视频中心</span>
      <span className="Banner-subtitle">
        帮您快速了解汉得产品，助力交付使用全流程
      </span>
      <div className="Input-box">
        <input
          className="Input"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        ></input>
        <button
          className="button"
          onClick={() => {
            navigate(`/${query}`);
          }}
        >
          搜&nbsp;&nbsp;索
        </button>
      </div>
    </div>
  );
}
